import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import { AtButton, AtCard, AtDivider, AtTag } from 'taro-ui'
// import timeagoInst from '../../utils'
import api from '../../utils/api'
import { Loading } from '../../components/Loading'
import DocsHeader from '../../components/doc-header'
import './detail.css'

export default class Detail extends Component {

  state = {
    loading: true,
    threads: {}
  }

  componentWillMount () { }

  async componentDidMount () {
    try {
      await Taro.request({
        url: api.getRequirementDetail({id:1}),
        success: function (res) {
          console.log('获取正常', res.data)
        }
      }).then(res => {
         console.log('--then--')
          this.setState({
            threads: res.data,
            loading: false
          })
      })
    } catch (error) {
      Taro.showToast({
        title: '载入远程数据错误'
      })
    }
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  constructor () {
    super(...arguments)
  }

  // state = {
  //   contents: [],
  //   contentsLen: 0
  // }

  // add = () => {
  //   this.setState(prev => {
  //     const cot = prev.contents.slice()
  //     cot.push({ text: 'hello world' })
  //     return {
  //       contents: cot,
  //       contentsLen: cot.length
  //     }
  //   })
  // }

  // remove = () => {
  //   this.setState(prev => {
  //     const cot = prev.contents.slice()
  //     cot.pop()
  //     return {
  //       contents: cot,
  //       contentsLen: cot.length
  //     }
  //   })
  // }


//   {
//     "detail": {
//         "id": "2",
//         "user_id": "1",
//         "is_admin": "1",
//         "type": "0",
//         "type_id": "3",
//         "from_type": "0",
//         "from_name": "",
//         "from_url": "",
//         "name": "口罩啊",
//         "introduce": "",
//         "need_time": "1580566137",
//         "is_buying": "1",
//         "is_donate": "1",
//         "is_people_donate": "1",
//         "urgency": "0",
//         "top_num": "0",
//         "status": "0",
//         "create_time": "1580220647",
//         "audit_time": "1580643745",
//         "detail": [
//             {
//                 "id": "26",
//                 "requirement_id": "2",
//                 "from_type": "0",
//                 "category_id": "3",
//                 "catagory_name": "护目镜",
//                 "name": "",
//                 "need_num": "100",
//                 "need_unit": "件",
//                 "standard": "",
//                 "seek_out": "0",
//                 "status": "0",
//                 "create_time": "1580643745",
//                 "is_delete": "0"
//             }
//         ],
//         "type_subject": {
//             "id": "3",
//             "user_id": "0",
//             "is_admin": "0",
//             "name": "武汉第一人民医院",
//             "icon_img": "/uploads/hospital/5e3572af3ca73.png",
//             "introduce": "",
//             "province": "湖北省",
//             "city": "武汉市",
//             "area": "江汉区",
//             "province_code": "420000",
//             "city_code": "420100",
//             "area_code": "420103",
//             "address": "人民大道",
//             "telphone": "010-1000101",
//             "level": "0",
//             "bedspace": "0",
//             "workers": "0",
//             "linkman": "张三",
//             "linkphone": "15888888888",
//             "status": "1",
//             "top_num": "0",
//             "create_time": "1580181421",
//             "audit_time": "1580561073",
//             "level_text": "未评级",
//             "linkers": []
//         },
//         "from_type_name": "官网",
//         "detail_temp": "requirementHospital"
//     }
// }


  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '物资需求详情'
  }

  level = (lev) => {
    switch (lev) {
      case 0:
        return '未评级';
        break;
      case 10:
        return '一级丙等';
        break;
      case 11:
        return '一级乙等';
        break;
      case 12:
        return '一级甲等';
        break;
      case 20:
        return '二级丙等';
        break;
      case 21:
        return '二级乙等';
        break;
      case 22:
        return '二级甲等';
        break;
      case 30:
        return '三级丙等';
        break;
      case 31:
        return '三级乙等';
        break;
      case 32:
        return '三级甲等';
        break;
      case 33:
        return '三级特等';
        break;
      default:
        // code...
        break;
    }
    return '未评级';
  }

  onShareAppMessage() {
    return {
      title: '新型肺炎-全国医院物资需求列表-Antares物资匹配调度系统',
      path: '/pages/search/index',
      imageUrl: 'https://2020.comelygift.com/img/status_1.png'
    }
  }

  goToHome = () => {
    Taro.navigateBack()
  }

  callPhone = (phone) => {
    Taro.makePhoneCall({phoneNumber: phone}).then(res => {
         console.log('--call phone--', res)
      })
  }

  render () {

    if(this.state.loading) {
      return <Loading />
    }

    const {loading, threads} = this.state

    // const time = timeagoInst.format(threads.detail.create_time * 1000, 'zh')

    return (
      <View className='at-article'>
        <View className='at-article__h2'>
          {threads.detail.type_subject.name}
        </View>
        <View className='at-article__info'>
          <View className='at-row at-row__justify--between'>
            <View className='at-col at-col-6 text-left'>{threads.detail.from_type_name}</View>
            <View className='at-col at-col-6 text-right'>发布时间：{threads.detail.create_time}</View>
          </View>
        </View>
        <AtDivider content='' height='30' fontColor='#2d8cf0' lineColor='#DBDBDB' />
        <AtCard title="医院介绍" className='margin_15'>
          {threads.detail.type_subject.introduce?threads.detail.type_subject.introduce:"暂无说明"}
        </AtCard>
        <AtCard title="医院情况" className='margin_15'>
          <View className='at-row at-row__justify--between'>
            <View className='at-col at-col-4'>医院级别：</View>
            <View className='at-col at-col-8'>{this.level(threads.detail.type_subject.level)}</View>
          </View>
          <View className='at-row at-row__justify--between'>
            <View className='at-col at-col-4'>床位数：</View>
            <View className='at-col at-col-8'>{threads.detail.type_subject.bedspace}床</View>
          </View>
          <View className='at-row at-row__justify--between'>
            <View className='at-col at-col-4'>医护人员数：</View>
            <View className='at-col at-col-8'>{threads.detail.type_subject.workers}人</View>
          </View>
        </AtCard>
        <AtCard title="需求说明" className='margin_15'>
          <AtTag active='true' type='primary' className="margin_10">需求时间：2020-02-03</AtTag>
          <AtTag disabled='true' type='primary'>接受购买</AtTag>
          <AtTag active='true' type='primary' className="margin_10">接受捐赠</AtTag>
          <AtTag active='true' type='primary' className="margin_10">接受个人捐赠</AtTag>
        </AtCard>
        <AtCard title="需求明细" className='margin_15'>
          {threads.detail.detail.map((dm, di) => {
            return <View className='at-row'>
                <View className='at-col at-col-9'>{dm.catagory_name}</View>
                <View className='at-col at-col-3'>{dm.need_num}{dm.need_unit}</View>
              </View>;
          })}
          <View className='at-row'>
            <View className='at-col at-col-6'><AtButton className="detail-button" type='primary' onClick={this.goToHome}>返回</AtButton></View>
            <View className='at-col at-col-6'><AtButton className="detail-button" type='primary' onClick={this.callPhone.bind(this, threads.detail.type_subject.linkphone?threads.detail.type_subject.linkphone:threads.detail.type_subject.telphone)}>立即联系</AtButton></View>
          </View>
        </AtCard>



      </View>
    )
  }
}
